<template>
    <div @touchmove="pagemove" class="detail_page">
        <header class="header">
            <span @click="goback" class="back glyphicon glyphicon-menu-left"></span>
        </header>
        <div class="banner">
            <img class="storeImg" :src="store_pic" alt="">
            <div class="des">
                <div class="deliver">
                    <span class="time">{{time}}</span>
                    <span class="sep">|</span>
                    <span class="distance">{{distance}}</span>
                </div>
                <div class="txt">
                    公告：<span class="title">{{title}}</span>
                </div>
                <div class="activities">
                    <!-- activity.discount.exist -->
                    <!-- {{activity.discount.con}} -->
                    <mt-swipe :auto="4000" :show-indicators="false" :speed="0.0001" class="swipe">
                        <mt-swipe-item v-if="activity.discount.exist" ><img src="../assets/images/discount.png" alt="">{{activity.discount.con}}</mt-swipe-item>
                        <mt-swipe-item v-if="activity.reduce.exist"><img src="../assets/images/reduce.png" alt="">{{activity.reduce.con}}</mt-swipe-item>
                        <mt-swipe-item v-if="activity.acquire.exist"><img src="../assets/images/acquire.png" alt="">{{activity.acquire.con}}</mt-swipe-item>
                    </mt-swipe>
                </div>
            </div>
        </div>
        <main>
            <div class="detail_tab" :class={fixed:fix}>
                <mt-navbar v-model="selected">
                    <mt-tab-item id="1">点菜</mt-tab-item>
                    <mt-tab-item id="2">评价</mt-tab-item>
                    <mt-tab-item id="3">商家</mt-tab-item>
                </mt-navbar>
            </div>
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="1">
                    <div class="order">
                        <div class="left-order">
                            <ul>
                                <li @click="changeIndex(item.id)" :class="{selected:current=='hot'}" v-for="(item,index) in classification" :key="index+'hots' " v-if="item.id == 'hot' "><img src="../assets/images/hot.png" alt=""><a href="javascript:;">{{item.con}}</a></li>
                                <li @click="changeIndex(item.id)" :class="{selected:current=='discount'}" v-for="(item,index) in classification"  :key="index+'disc' " v-if="item.id == 'discount' "><img src="../assets/images/discount1.png" alt=""><a href="javascript:;">{{item.con}}</a></li>
                                <li @click="changeIndex(item.id)" :class="{selected:current==item.id}" v-for="(item,index) in classification"  :key="index+'nor' " v-if="item.id != 'discount' && item.id != 'hot' "><a href="javascript:;">{{item.con}}</a></li>
                            </ul>
                        </div>
                        <div class="right-order">
                            <ul v-for="(item,index) in classification" :key="index+'cla' " :id="item.id" @touchmove.stop="move(item.id)">
                                <h5>{{item.con}}</h5>
                                <li v-for="(i,n) in item.dishes" :key=" n+'dish' ">
                                    <img class="dish-pic" :src="i.src" alt="">
                                    <div class="dis-des">
                                        <div class="name">{{i.name}}</div>
                                        <div class="sale">
                                            月销售<span class="sale_amount">{{i.sale_amount}}</span>+
                                            <span class="like">赞 <i class="like_num">{{i.like}}</i> </span>
                                        </div>
                                        <div class="price">
                                            <span class="prices">￥<span class="price_num">{{i.price}}</span></span>
                                            <span class="person">{{i.person}}</span>
                                        </div>
                                        <div class="discount_info" v-if="i.discount_info">
                                            {{i.discount_info}}
                                        </div>
                                    </div>
                                    <div class="add" @click="addToCart(i.name,i.price,i.person,i.price)">

                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 购物车 开始-->
                    <div class="cart">
                        <div class="dropup">
                            <div class="tip">
                                <span v-if="pay == 0">还差 <span class="money_difference">{{(delivery_start_price - total).toFixed(2)}}元</span> 就能起送</span>
                                <span v-if="pay == 1">已满足起送价</span>
                                <span class="get_more">去凑单</span>
                            </div>
                            <div class="shopping_items">
                                <dl>
                                    <dt>
                                        <span class="shop_title">购物车</span>
                                        <a class="clear_cart" href="javascript:;">
                                            <img src="../assets/images/clear_cart.png" alt="">
                                            <i @click="clean">清空购物车</i>
                                        </a>
                                    </dt>
                                    <dd v-for="(item,index) in shop_list" :key="index + 'xyz123' ">
                                        <div class="dish_name">
                                            <h5>{{item.name}}</h5>
                                            <p>({{item.person}})</p>
                                        </div>
                                        <div class="pay">
                                            <span class="sub_total">￥{{item.price}}</span>
                                            <span class="item_info">
                                                <i class="add" @click="add_num(index)"></i>
                                                <span class="buying-num">{{item.num}}</span>
                                                <i class="minus" @click="reduce_num(index)"></i>
                                            </span>
                                        </div>
                                    </dd>
                                    <dd class="packing_extra">
                                        <div class="dish_name">
                                            <h5>打包费</h5>
                                        </div>
                                        <div class="pay">
                                            <span class="sub_total">￥{{pack_cost}}</span>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                            <div @click="show_cart($event)" class="shopping_info">
                                <div class="total">
                                    <div class="cart_img"></div>
                                    <div class="total_amount">
                                        ￥<span>{{total}}</span>
                                    </div>
                                    <div class="delivery_pay">
                                        另需配送费￥2.5
                                    </div>
                                </div>
                                <div class="deliver_start_price" :class="{deliver_start_price_change:pay == 1}">
                                    <span v-if="pay == 0">差￥{{(delivery_start_price - total).toFixed(2)}}元起送</span>
                                    <span v-if="pay == 1">去结算</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 购物车 -->
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <div class="rating">
                        <div class="store_rating">
                            <span class="store_score">{{store_score.com}}</span>
                            <i>商家评分</i>
                        </div>
                        <div class="scores">
                            <div class="taste">
                                <p>口味</p>
                                <span class="taste_stars">
                                    <i v-for="n in parseInt(store_score.taste)" :key="n+ 'taste_full' " class="glyphicon glyphicon-star"></i>
                                    <i v-for="n in (5 - parseInt(store_score.taste))" :key="n+ 'taste12' " class="glyphicon glyphicon-star-empty"></i>
                                </span>
                                <span class="num">{{store_score.taste}}</span>
                            </div>
                            <div class="pack">
                                <p>包装</p>
                                <span class="pack_stars">
                                    <i v-for="n in parseInt(store_score.pack)" :key="n+ 'pack_full' " class="glyphicon glyphicon-star"></i>
                                    <i v-for="n in (5 - parseInt(store_score.pack))" :key="n+ 'pack1' " class="glyphicon glyphicon-star-empty"></i>
                                </span>
                                <span class="num">{{store_score.pack}}</span>
                            </div>
                        </div>
                        <div class="delivery_rating">
                            <span class="delivery_score">{{delivery_score}}</span>
                            <i>配送评分</i>
                        </div>
                    </div>
                    <div class="remarks">
                        <span v-for="(item,index) in remark" @click="change_remark(item.id)" :key="index + 'remark' " class="remark_class" :class="{remark_selected:remark_selected == item.id}">{{item.txt}}<i>({{item.num}})</i> </span>
                    </div>
                    <div class="user_comments">
                        <ul>
                            <li v-for="(item,index) in remark" :key="index + 'user-comments' " v-if="remark_selected == item.id">
                                <div class="comment-con" v-for="(ele,i) in item.users" :key="i">
                                    <div class="users_icon">
                                        <img src="../assets/images/user1.png" alt="">
                                    </div>
                                    <div class="comments">
                                        <div class="comment_title">
                                            <div class="user_info">
                                                <div class="username">{{ele.username}}</div>
                                                <div class="actual_deliver_time">{{ele.actual_deliver_time}}</div>
                                            </div>
                                            <div class="date">{{ele.date}}</div>
                                        </div>
                                        <p class="paragraphs">
                                            {{ele.paragraphs}}
                                        </p>
                                        <div class="dish_actual_pic">
                                            <img :src="ele.src" alt="">
                                        </div>
                                        <div class="zan_items">
                                            <div class="zan" v-if="ele.zan.exist">
                                                <img src="../assets/images/zan.png" alt="">
                                                <span>{{ele.zan.con}}</span>
                                            </div>
                                            <div class="zan_com" v-if="ele.zan_com.exist">
                                                <img src="../assets/images/zan_com.png" alt="">
                                                <span> {{ele.zan_com.con}} </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="3">
                    <div class="restaurant_info">
                        <div class="store_address">
                            <img src="../assets/images/location_detail1.png" alt="">
                            <span> {{restaurant.address}} </span>
                        </div>
                        <div class="safety_archive">
                            <img src="../assets/images/safety.png" alt="">
                            <span> {{restaurant.safety}} </span>
                        </div>
                        <div class="open_time">
                            <img src="../assets/images/open_time12.png" alt="">
                            <span>{{restaurant.open_time}}</span>
                        </div>
                        <dl class="service">
                            <dt>
                                <img src="../assets/images/service12.png" alt="">
                                <span>商家服务</span>
                            </dt>
                            <dd></dd>
                            <dd v-if="activity.discount.exist"><img src="../assets/images/discount.png" alt="">{{activity.discount.con}}</dd>
                            <dd v-if="activity.reduce.exist"><img src="../assets/images/reduce.png" alt="">{{activity.reduce.con}}</dd>
                            <dd v-if="activity.acquire.exist"><img src="../assets/images/send1.png" alt="">{{activity.acquire.con}}</dd>
                            <dd v-if="activity.acquire.exist"><img src="../assets/images/pay12.png" alt="">{{activity.pay.con}}</dd>
                        </dl>
                    </div>
                </mt-tab-container-item>
            </mt-tab-container>
        </main>
        
        
    </div>
</template>

<script>
    export default {
        data:function(){
            return {
                selected: "1",
                remark_selected:"good",
                shop_list: [],
                time:"",
                distance:"",
                title:"",
                activity:{},
                classification:[],
                current:"hot",
                fix:false,
                store_score:{},
                delivery_score:"",
                remark:[],
                restaurant:{},
                pay:0,
                delivery_start_price:0,
                pack_cost:0,
                store_pic:""
            }
        },
        mounted(){
            //  this.$route.params.id
            // axios请求数据
            this.$http.get(`./data/detail/detail_data${this.$route.params.id}.json`)
            .then((res) => {
                // 点菜部分的数据
                this.time = res.data.time;
                this.distance = res.data.distance;
                this.title = res.data.title;
                this.activity = res.data.activity;
                this.classification = res.data.classification;
                // 评论部分的数据
                this.store_score = res.data.store_score;
                this.delivery_score = res.data.delivery_score;
                this.remark = res.data.remark;
                // 商家信息
                this.restaurant = res.data.restaurant;
                this.delivery_start_price = res.data.delivery_start_price;
                this.pack_cost = res.data.pack_cost;
                this.store_pic = res.data.store_pic;
            });
            
        },
        methods:{
            // 切换菜分类时页面滚动到当前位置
            changeIndex(id){
                this.current = id;
                var r_top = $(".right-order").offset().top;
                var e_top = $(`#${id}`).offset().top;
                var scroll =  $(".right-order").scrollTop();
                // $(".right-order").scrollTop(e_top + scroll - r_top);
                $('.right-order').animate({scrollTop: e_top + scroll - r_top}, 700);
            },
            // 手动划屏的时候菜分类当前位置被选中
            move(id){
                this.current = id;
            },
            // 页面卷入的头部到一定程度的时候  tab栏成为固定的定位
            pagemove(){
                var page = $(window).scrollTop();
                var banner = $(".banner").height();
                var header = $(".header").height();
                if(page<banner+header){
                    this.fix = false;
                }else{
                    this.fix = true;
                }
            },
            // 切换评论的分类
            change_remark(id) {
                // console.log(12);
                this.remark_selected = id;
            },
            goback(){
                this.$router.go(-1);
            },
            // 上拉购物清单
            show_cart(e){
                $(e.target).siblings(".shopping_items").slideToggle(600);
            },
            clean(){
                this.shop_list =  [];
            },
            // 添加商品至购物车中
            addToCart(name,price,person,unit_price){
                var obj = {
                    name,
                    price,
                    person,
                    num:1,
                    unit_price
                };
                var index = this.shop_list.findIndex((item) => {
                        return item.name == obj.name;
                });
                if(index == -1) {
                    this.shop_list.push(obj);
                    // this.num_list.push(1);
                }else {
                    var num = this.shop_list[index].num;
                    num++;
                    var new_price = num*unit_price;
                    var new_obj = {
                        name,
                        price:new_price,
                        person,
                        num,
                        unit_price
                    };
                    this.$set(this.shop_list,index,new_obj);
                }
                
            },
            add_num(index){
                var num = this.shop_list[index].num;
                num++;
                var obj = this.shop_list[index];
                var price = obj.unit_price*num;
                obj.num = num;
                obj.price = price;
                this.$set(this.shop_list,index,obj);
            },
            reduce_num(index){
                var num = this.shop_list[index].num;
                num--;
                if(num == 0) {
                    this.shop_list.splice(index,1);
                }else{
                    var obj = this.shop_list[index];
                    var price = obj.unit_price*num;
                    obj.num = num;
                    obj.price = price;
                    this.$set(this.shop_list,index,obj);
                }
                
            }
        },
        computed:{
            total(){
                var sum = 0;
                this.shop_list.forEach((item)  => {
                    sum += item.price;
                });
                return sum+this.pack_cost;
            }
        },
        // 如果满足起送条件则变化提示语句
        watch:{
            total:function(val){
                if(val >= this.delivery_start_price){
                    this.pay = 1;
                }else{
                    this.pay = 0;
                }
            }
        }
    }
</script>

<style scoped>
    
    header {
        display: flex;
        align-items: center;
        height: 50px;
        background-color: rgb(46,47,59);
        color: rgb(255,255,255);
    }
    header .back {
        margin-left: 10px;
    }
    .banner {
        display: flex;
        height: 80px;
        padding: 10px 10px 20px;
        background-color: rgb(46,47,59);
        color: rgb(255,255,255);
    }
    .sep {
        opacity: 0.3;
    }
    .banner .storeImg {
        width: 86px;
        height: 64px;
    }
    .banner .des {
        flex: 1;
        margin-left: 10px;
        font-size: 12px;
    }
    .txt {
        margin: 7px 0;
    }
    
    .activities img {
        width: 15px;
        height: 15px;
        margin: -3px 5px 0 0;
    }
    .swipe {
        height: 20px;
    }
    /* tab 栏切换部分 */
    main {
        height: 2000px;
        overflow-y: hidden;
    }
    /* 点菜部分*/
    main .order {
        display: flex;
    }
    .fixed {
       position: fixed;
       width: 100%;
       top: 0; 
       z-index: 1000;
    }
    .order .left-order {
        width: 80px;
        height: 500px;
        /* background: pink; */
        text-align: center;
        overflow-y: hidden;
    }
    .order .left-order li {
        height: 60px;
        line-height: 60px;
        font-size: 12px;
        background-color: #F5F5F5;
    }
    .order .left-order li a {
        color: #666666;
    }
    .order .left-order li.selected {
        background-color: #fff;
    }
    .order .left-order li.selected a {
       color: #333; 
    }
    .order .left-order img {
        width: 15px;
        height: 15px;
        margin-top: -3px;
    }
    .order .right-order {
        flex: 1;
        height: 500px;
        /* background-color: yellow; */
        padding: 10px;
        overflow-y: auto;
    }
    h5 {
        height: 36px;
        line-height: 36px;
        padding-left: 10px;
        font-size: 12px;
        background-color: #fff;
        color: #333333;
    }
    .order .right-order li {
        display: flex;
        position: relative;
        margin: 20px 0;
    }
    .order .right-order ul:last-child::after  {
        content: "";
        display: block;
        height: 200px;
    }
    .discount_info {
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-style: solid;
        border-width: 1px;
        border-color: #fb4e44;
        font-size: 10px;
        color: #fb4e44;
    }
    .order .right-order li .add {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 25px;
        height: 25px;
        background: url(../assets/images/add.png);
        background-size: 25px 25px;
        cursor: pointer;
    }
    .order .right-order .dish-pic {
        width: 75px;
        height: 75px;
    }
    .order .right-order .dis-des {
        margin-left: 10px;
    }
    .order .right-order .name {
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        font-family: "PingFangSC-Medium", "Hiragino Sans GB", Arial, Helvetica, "\5B8B\4F53", sans-serif;
        line-height: 22.5px;
        margin-bottom: 2px;
    }
    .order .right-order .sale {
        line-height: 15px;
        font-size: 11px;
        color: #666;
    }
    .order .right-order .like {
        margin-left: 7px;
    }
    .price {
        margin-top: 15px;
    }
    .prices {
        color: #fb4e44;
        font-size: 18px;
        font-family: "PingFangSC-Medium", "Hiragino Sans GB", Arial, Helvetica, "\5B8B\4F53", sans-serif;
    }
    .person {
        color: #999;
        font-size: 12px;
    }
    /* 评分部分 */
    .rating {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        padding: 0 20px;
        /* background-color: pink; */
        text-align: center;
    }
    .store_rating,
    .delivery_rating {
        width: 100px;
        /* height: 60px; */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .scores {
        display: flex;
        height: 46px;
        flex-direction: column;
        justify-content: space-between;
    }
    .scores .taste,
    .scores .pack {
        display: flex;
        align-items: center;
    }
    .scores p {
        display: inline-block;
        padding: 0;
        margin: 0;
        font-size: 13px;
        margin-right: 15px;
        color: #666;
        vertical-align: bottom;
    }
    .scores .glyphicon-star,
    .scores .glyphicon-star-empty,
    .scores .num {
        font-size: 13px;
        color: #FFB000;
    }
    .scores .glyphicon-star,
    .scores .glyphicon-star-empty {
        margin-right: -5px;
    }
    .scores .num {
        margin-left: 15px;
    }
    .store_score,
    .delivery_score {
        font-size: 27px;
        height: 30px;
        line-height: 30px;
        color: #999;
    }
    .store_score {
        color: #FFB000;
    }
    .rating i {
        font-size: 12px;
        color: #999;
    }
    .remarks {
        padding: 15px;
        border-bottom: 1px solid #ccc;
    }
    .remarks .remark_class {
        display: inline-block;
        margin-right: 7px;
        width: 86px;
        height: 26px;
        line-height: 26px;
        border: 1px solid #bbb;
        border-radius: 26px;
        text-align: center;
        font-size: 13px;
    }
    .remarks .remark_selected {
        color: #FFB000;
        border-color: #FFB000;
    }
    .user_comments li .comment-con{
        display: flex;
        padding: 15px;
        border-bottom: 1px solid #ccc;
    }
    .user_comments .users_icon {
        flex: 1;
    }
    .user_comments .users_icon img {
        width: 40px;
    }
    .user_comments .comments {
        flex: 9;
        margin-left: 20px;
    }
    .comment_title {
        height: 40px;
    }
    .actual_deliver_time {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
    }
    .date {
        font-size: 12px;
        color: #666;
    }
    .paragraphs {
        margin-top: 10px;
    }
    
    .comment_title .user_info {
        float: left;
    }
    .comment_title .date {
        float: right;
    }
    .dish_actual_pic img {
        width: 80px;
    }
    .zan_items span {
        margin-left: 5px;
        color: #999;
        font-size: 12px;
        vertical-align: middle;
    }
    .zan_items img {
        width: 11px;
    }
    .zan,
    .zan_com {
        margin-top: 5px;
    }
    /* 商家部分 */
    .restaurant_info {
        padding: 15px;
        font-family: mtsi-font;
        font-size: 14px;
    }
    .restaurant_info img {
        width: 15px;
        margin-right: 5px;
    }
    .restaurant_info div,
    .restaurant_info dt {
        padding: 15px 0 15px;
    }
    
    .restaurant_info .safety_archive,
    .restaurant_info .open_time {
        border-bottom: 1px solid #F2F2F2;
    }
    .restaurant_info dd {
        padding: 5px 0 5px;
    }
    /* 购物车部分 */
    .cart {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 9999;
        background-color: #fff;
    }
    .cart .dropup .tip {
        background: #fff1d0;
        text-align: center;
        height: 25px;
        line-height: 25px;
        display: flex;
        letter-spacing: 0.15px;
        align-items: center;
        justify-content: center;
        font-size: 11px;
    }
    .cart .money_difference {
        color: #e23232;
    }
    .cart .dropup .get_more {
        background: #FB4E44;
        border-radius: 2px;
        width: 58px;
        line-height: 20px;
        display: inline-block;
        color: #fff;
        margin-left: 8px;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

    .shopping_items dt {
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        line-height: 40px;
        height: 40px;
        background: #F4F4F4;
        font-size: 12px;
        color: #666;
    }
    /* .shop_title,
    .clear_cart {
        color: #666;
    } */
    .clear_cart img {
        width: 12px;
    }
    .shopping_items dd {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0px;
        font-size: 16px;
        color: #333;
        border-bottom: 1px solid #E4E4E4;
        margin: 0 15px;
        background-color: #fff;
    }
    .dish_name h5,
    .dish_name p {
        margin: 0;
        padding: 0;
    }
    .dish_name h5 {
        font-size: 16px;
        color: #333;
    }
    .dish_name p {
        font-size: 12px;
        color: #999;
        margin-top: -5px;
    }
    .pay {
        display: flex;
        align-items: center;
    }
    .pay .sub_total {
        color: #FB4E44;
    }
    
    .item_info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 25px;
        width: 80px;
    }
    .item_info .add,
    .item_info .minus {
        width: 25px;
        height: 25px;
        background: url(../assets/images/add.png);
        background-size: 25px 25px;
        cursor: pointer;
    }
    .item_info .minus {
        background: url(../assets/images/minus.png);
        background-size: 25px 25px;
    }
    
    .packing_extra .pay {
        width: 139px;
        text-align: left;
    }
    .shopping_info {
        position: relative;
        display: flex;
        justify-content: space-between;
        height: 50px;
        padding: 0 10px 0 66px;
        background: #3b3b3c;
    }
    .shopping_info .total .cart_img {
        position: absolute;
        top: -20px;
        left: 7px;
        width: 50px;
        height: 50px;
        background: url(../assets/images/cart.png) no-repeat;
        background-size: 50px 50px;
    }
    .total_amount {
        width: 42px;
        height: 27px;
        color: #fff;
    }
    .total_amount span {
        font-size: 24px;
    }
    .delivery_pay {
        font-size: 11px;
        color: #999;
    }
    .deliver_start_price {
        font-size: 16px;
        font-weight: bold;
        padding: 0 18px;
        line-height: 50px;
        background: #2e2d2d;
        color: #999;
        margin-right: -10px;
    }

    .deliver_start_price_change {
        background: #f8c74e;
        background-image: linear-gradient(-135deg, #FFBD27 0%, #FFD161 100%);
        color: #333;
    }
</style>

